<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-if="liststate">
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator="/">
          <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="目录名称 " prop="directoryName">
                  <el-input
                    @keyup.enter="handleFilter"
                    style="width: 200px;"
                    placeholder="请输入"
                    class="filter-item"
                    v-model="requestParameters.directoryName"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label="状态" prop="state">
                  <el-select
                    class="filter-item"
                    style="width: 180px;"
                    v-model="requestParameters.state"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-button size="small" @click="handleClear">清除</el-button>
              <el-button size="small" type="primary" @click="handleFilter"
                >搜索</el-button
              >
              <!-- 右侧按钮和返回学科 -->
              <el-form-item class="right">
                <el-link
                  type="primary"
                  icon="el-icon-back"
                  style="padding-right:8px"
                  v-if="liststate"
                  @click="toClick"
                  >返回学科</el-link
                >
                <el-button
                  size="small"
                  @click="handleChange(null, $event)"
                  type="success"
                  icon="el-icon-edit"
                  >新增目录</el-button
                >
              </el-form-item>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          element-loading-text="给我一点时间"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column align="left" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="所属学科">
            <template slot-scope="scope">
              <span>{{ scope.row.subjectName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="标签名称">
            <template slot-scope="scope">
              <span>{{ scope.row.directoryName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建者">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建日期">
            <template slot-scope="scope">
              <span>{{
                scope.row.addDate | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="left"
            label="操作"
            width="180"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="buttonClick(scope.row)">{{
                scope.row.state === 1 ? '禁用' : '启用'
              }}</el-button>
              <el-button
                type="text"
                @click="handleChange(scope.row.id)"
                :disabled="scope.row.state === 1 ? true : false"
                >修改</el-button
              >
              <el-button
                :disabled="scope.row.state === 1 ? true : false"
                type="text"
                v-if="scope.row.status != 'deleted'"
                size="mini"
                @click="removeUser(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination fr">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10, 20, 30, 50]"
              v-if="!liststate"
              layout=" prev, pager, next,sizes, jumper"
              style="padding-bottom:20px"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <Dialog
          ref="editUser"
          :titleInfo="titleInfo"
          :formBase="formData"
          v-on:newDataes="getList"
        ></Dialog>
      </el-card>
    </div>
    <!--目录进来的 新增目录对话框 -->
    <el-dialog
      :title="id ? '修改目录' : '添加目录'"
      :visible.sync="DialogVisible"
      width="40%"
    >
      <directorys-add
        v-if="DialogVisible"
        :id="id"
        ref="add"
        @close="closeadd"
        :liststate="liststate"
        :subjectID="subjectID"
      ></directorys-add>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickadd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, changeState, remove, detail } from '@/api/hmmm/directorys'
import { simple as subjectsSimple } from '@/api/hmmm/subjects'
import directorysAdd from '../components/directorys-add.vue'

export default {
  name: 'Directorys',
  components: {
    directorysAdd
  },
  data() {
    return {
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      alertText: '',
      requestParameters: {
        page: 1,
        pagesize: 10,
        directoryName: ''
      },
      titleInfo: {
        pageTitle: '用户', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: {
        isFamous: '',
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      },
      // 验证目标名称

      // 所属学科的数据列表

      // 查询到的修改信息
      editForm: {
        directoryName: '',
        subjectID: '',
        id: ''
      },
      editFormRules: {
        directoryName: [
          {
            required: true,
            message: '请输入目录名称',
            trigger: 'blur'
          }
        ]
      },
      DialogVisible: false,
      id: '',
      liststate: false,
      subjectID: '',
      status: [
        { value: 1, label: '启用' },
        { value: 0, label: '禁用' }
      ]
    }
  },
  computed: {
  },
  methods: {
    toClick() {
      this.$router.push('/subjects/list')
    },
    // 禁用启用按钮
    async buttonClick(row) {
      try {
        const { data } = await changeState({
          id: row.id,
          state: row.state === 1 ? '0' : '1'
        })
        this.$message.success('修改成功')
        this.getList()
        console.log(data)
      } catch (err) {
        this.$message.error('修改失败')
      }
    },
    // 监听添加目录对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },

    // 点击按钮添加新目录
    addUser() {
      this.$refs.addFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        // 发起网络请求
        try {
          const { data } = await add(this.addForm)
          console.log(data)
        } catch (err) {
          this.$message.error('添加失败')
        }

        this.addDialogVisible = false
        this.getList()
      })
    },
    async rolesList1() {
      try {
        const { data } = await subjectsSimple()
        console.log(data)
        this.options1 = data
      } catch (err) {}
    },
    // 初始数据
    initialDate() {
      // 读取数据
      this.getList()
    },
    // 获取列表数据
    async getList() {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      console.log(res)
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 重置
    resetForm() {
      this.$refs.requestParameters.resetFields()
    },
    // 搜索信息
    handleFilter() {
      this.requestParameters.page = 1
      console.log(this.requestParameters)
      this.getList()
    },
    // 点击清除 状态删除
    handleClear() {
      this.$refs.requestParameters.resetFields()
      this.getList()
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList()
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.getList()
    },

    // **********************************
    // 搜索的项目
    // 添加、编辑之后表单清空
    query() {
      this.formData = {}
    },

    // 窗口操作**********************************
    // 编辑
    // 表单详情数据加载
    async hanldeEditForm(objeditId) {
      this.formData.id = objeditId
      const { data: res } = await detail({ id: objeditId })
      // 获取详情 给formData
      this.formData = res
    },
    // 删除
    removeUser(user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(user, 1)
              this.getList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },

    handleChange(id) {
      if (id) {
        this.id = id
      } else {
        this.id = ''
      }
      this.DialogVisible = true
    },
    clickadd() {
      this.$refs.add.btnclick()
    },
    closeadd() {
      this.DialogVisible = false
      this.getList()
      this.id = ''
    }
  },
  // 挂载结束
  mounted: function() {},
  // 创建完毕状态
  created() {
    this.initialDate()
    if (this.$route.query.id) {
      this.liststate = true
      this.subjectID = this.$route.query.id
      this.requestParameters.subjectID = this.subjectID
      this.getList()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  // margin: 10px 0px;
  margin: 0px 0px 10px 0;
}
.pagination {
  margin-top: 10px;
}
.el-row {
  height: 40px;
}
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}

.el-form-item {
  position: relative;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
  right: 12px;
}
.el-select {
  width: 100%;
}
</style>
